<template>
  <section v-if="finished">
    <div class="content-title">{{ title }}</div>
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="detail-sort">{{ detail.sort }}</div>
          <div class="detail-title">
            <div>
              {{ detail.title }}
            </div>
          </div>
          <div @click="lastAcconnt" class="last">
            <el-icon>
              <component :is="elicons['ArrowLeftBold']" />
            </el-icon>
          </div>
          <div @click="nextAcconnt" class="next">
            <el-icon>
              <component :is="elicons['ArrowRightBold']" />
            </el-icon>
          </div>
        </div>
      </template>
      <div class="account">
        <span>账号：</span>
        <el-button type="primary" @click="copyText(detail.account)">{{ detail.account }}</el-button>
      </div>
      <div class="password">
        <span>密码：</span>
        <el-button @click="copyText(detail.password)">{{ detail.password }}</el-button>
      </div>
    </el-card>
  </section>
</template>
<script setup>
import { computed, getCurrentInstance, onMounted, ref } from 'vue';
import elicons from '@/utils/elicons';
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const { proxy } = getCurrentInstance()
const list = ref([])
const listIdx = ref(0)
const finished = ref(false)
onMounted(() => {
  proxy.$service.getAllData('passwords').then(res => {
    list.value = res.data
    finished.value = true
  })
})
const detail = computed(() => {
  return list.value[listIdx.value]
})

function nextAcconnt() {
  if (listIdx.value < list.value.length - 1) {
    listIdx.value += 1
  } else {
    listIdx.value = 0
  }
}

function lastAcconnt() {
  if (listIdx.value > 0) {
    listIdx.value -= 1
  } else {
    listIdx.value = list.value.length - 1
  }
}

function copyText(text) {
  proxy.$global.copyText(text)
}
</script>
<style scoped lang="scss">
.card-header {
  width: 100%;
  display: flex;

  >.last,
  .next {
    width: 50px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }

  .detail-sort {
    width: 30px;
    height: 30px;
    background-color: #ad83ec;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }

  .detail-title {
    width: calc(100% - 120px);
    display: flex;


  }
}

.account,
.password {
  margin-bottom: 10px;

  >div {
    display: flex;
    align-items: center;
  }
}
</style>
